import 'package:base_plugin/base_plugin.dart';
import 'package:finance_app/src/common/app_colors.dart';
import 'package:finance_app/src/utils/form_utils.dart';
import 'package:finance_app/src/utils/language_utils.dart';
import 'package:finance_app/src/widgets/form/form_edit_status_inherited_widget.dart';
import 'package:finance_app/src/widgets/wrapper/normal_form_wrapper.dart';
import 'package:flutter/material.dart';

const Duration kMoveDuration = const Duration(milliseconds: 300);

// ignore: must_be_immutable
class StatusLineForm extends StatelessWidget {
  int value;
  List<String> steps;
  Color color;

  StatusLineForm({Key key, String status, String model, int unpaid})
      : super(key: key) {
    steps = FormUtils.getStatusList(model, status, unpaid);
    value = steps.indexOf(FormUtils.getStatus(model, status, unpaid));
    color = FormUtils.getStatusColor(status);
    if (value < 0) value = 0;
    print('steps:$steps , value:$value , $status, $model,$unpaid');
  }

  final colors = [
    aceRedColor,
    aceGreenColor,
  ];

  Color get _color => color ?? colors[value];

  @override
  Widget build(BuildContext context) {
    MediaQueryData queryData = MediaQuery.of(context);
    double width = queryData.size.width - 62;

    return FormStatusWidget(
      enable: Container(),
      disable: NormalFormWrapper(
        leftPadding: getDp(31),
        rightPadding: getDp(31),
        hasBottomBorder: true,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: EdgeInsets.symmetric(horizontal: getDp(10)),
              child: Stack(
                clipBehavior: Clip.none,
                alignment: Alignment.centerLeft,
                children: [
                  Container(
                    width: width,
                    height: getDp(2),
                    color: aceGrayColor,
                  ),
                  AnimatedContainer(
                    duration: kMoveDuration,
                    height: getDp(2),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(getDp(1)),
                      color: _color,
                    ),
                    width: (width * value) / (steps.length - 1) -
                        (value > 0 ? 20 : 0),
                  ),
                  ...List.generate(
                      steps.length,
                      (index) => Positioned(
                            left: (width * index) / (steps.length - 1) -
                                (index != 0 ? getDp(25) : 0),
                            child: Container(
                              width: getDp(20),
                              height: getDp(20),
                              decoration: BoxDecoration(
                                  shape: BoxShape.circle,
                                  color: Colors.white,
                                  border: Border.all(
                                    color:
                                        index <= value ? _color : aceGrayColor,
                                    width: getDp(5),
                                  )),
                            ),
                          )),
                ],
              ),
            ),
            SizedBox(
              height: getDp(16),
            ),
            LimitedBox(
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: List.generate(
                      steps.length,
                      (index) => Text(
                            LanguageUtils.translateStatus(steps[index]),
                            style: TextStyle(
                              color: index <= value ? _color : aceDarkGrayColor,
                              fontSize: getSp(16),
                              fontWeight: value == index
                                  ? FontWeight.w700
                                  : FontWeight.w400,
                              height: 14 / 16,
                            ),
                          ))),
            ),
          ],
        ),
      ),
    );
  }
}
